<template>
  <div  class="m-header" >
    <h2 class="header-title">MEMS管理系统</h2>
    <div class="header-right">
            <span class="img-box">
              <img :src="headImg" alt="">
            </span>
      <span class="m-name">你好，{{parcel.supplier_name}}</span>
      <a class="header-button " href="/admin/auth/logout">
        <img :src="quitButton" alt="">
      </a>

    </div>
  </div>
</template>

<script>
  import headerImg from "@/assets/imgs/no-head.png";
  import quitImg from "@/assets/imgs/quit.png";
    export default {
        name: "topHeader",
        props:["parcel","logout"],
        computed:{
          headImg(){
            return this.parcel.avatar ? this.parcel.avatar : headerImg;
          },
          quitButton(){
            return quitImg;
          }
        }
    }
</script>

<style scoped lang = "scss">
  .m-header{
    background: #FFFFFF;
    box-shadow: 0 1px 8px 0 rgba(155,155,155,0.30);
    padding:20px 30px;
    display:inline-block;
    width: 100%;
    box-sizing: border-box;
    .header-title{
      display: inline-block;
      font-family: PingFangSC-Regular;
      font-size: 28px;
      color: #000000;
      letter-spacing: 0;
    }
    .header-right{
      text-align: right;
      float:right;
      vertical-align: middle;
      .img-box{
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 5px;
        vertical-align: middle;
        img{
          height: 100%;
          width:100%;
        }

  }
      .m-name{
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #212121;
    letter-spacing: 0;
    text-align: justify;
    padding-right:10px;
    vertical-align: middle;
  }
      .header-button{
        display: inline-block;
        width:20px;
        height: 20px;
        margin-left:15px;
        vertical-align: middle;
        color:#000;
        img{
          height: 100%;
          width:100%;
        }
      }
    }
  }
</style>
